<!-- 幻灯片组件 -->
<template>
	<view :style="'order:'+Item.order+';'+Item.css">
		<swiper
			:style="'width:'+Item.width+';height:'+Item.height+';display: block;overflow: hidden;'"
			:indicator-dots="Item.indicatorDots"
			:indicator-color="Item.indicatorColor"
			:indicator-active-color="Item.indicatorActiveColor"
			:autoplay="Item.autoplay"
			:interval="Item.interval"
			:duration="Item.duration"
			:circular="Item.circular"
			:vertical="Item.vertical">
			<swiper-item
				v-for="item in Item.list">
				<view
					:style="'width:'+Item.width+';height:'+Item.height+';display: block;overflow: hidden;'"
					@click="$_To(item.url)"
					class="swiper-item">
					<view
						class="images"
						:style="'width:'+Item.width+';height:'+Item.height+';display: block;overflow: hidden;'">
						<image :src="item.images" mode="widthFix"></image>
					</view>
					<view class="text" v-if="item.text">{{item.text}}</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"block-filmstrip",
		props:{
			Item:{
				type:Object,
				default:null
			},
			YrConfig:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				itemList:[]
			};
		},
		mounted(){
			
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
.swiper-item{
	position: relative;
	.images{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.text{
		width: 100%;
		height: 80rpx;
		background-color:rgba(0,0,0,0.5);
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 2;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>